<template>
 <el-dialog v-model="visiable" title="主题配置" :draggable="true">
    <el-form :model="themeFormData" label-width="auto" style="max-width: 600px">
      <el-form-item label="主题色" prop="primary">
        <el-color-picker v-model="themeFormData.primary" />
      </el-form-item>
      <el-form-item label="背景色" prop="bg">
        <el-color-picker v-model="themeFormData.bg" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="onCancle">取消</el-button>
        <el-button type="primary" @click="onConfirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { updateElementPlusTheme } from '@/utils/element';
import { reactive } from 'vue';

const visiable = defineModel(false);
const themeFormData = reactive({ primary: '#3C80FF', bg: '#3A3E4F' })

const onCancle = () => {
  visiable.value = false;
}

const onConfirm = () => {
  Object.entries(themeFormData).forEach(([key, value]) => {
    updateElementPlusTheme(key, value)
  })
  // updateElementPlusTheme(themeFormData.primary)
  visiable.value = false;
}
</script>

<style lang="scss" scoped>

</style>